<template > 
  <div>
     <el-dropdown  trigger="click">
      <!-- <div class="logo-box"> -->
      <span class="el-dropdown-link">
      <el-avatar :size="30" :src="circleUrl" />
      <div class='logo-text'>点击登录</div>
      </span>
      <!-- </div> -->
        <template #dropdown>
          <el-dropdown-menu class='login-item'>
            <el-tabs  class="demo-tabs" >
              <el-tab-pane label="扫码登录" name="first">

                <img clss='img64' v-if="qrimg && qrimg!= '' " :src="qrimg" alt="">
                <br/>
    使用网易云手机app扫码登录
              </el-tab-pane>
              <el-tab-pane class='number-login' label="手机号登录" name="second">

                <el-input v-model="phone" placeholder="手机号" />
                <el-input v-model="password" placeholder="密码" type="text" />
                <el-button type="danger" round @click="loginFn">登录</el-button>
              </el-tab-pane>
            </el-tabs>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ArrowDown } from '@element-plus/icons-vue'
import api from '../../tools/server/request'
//默认激活
const activeIndex = ref('1')
const circleUrl = ref('http://www.codeman.ink/img/test.b66d0610.jpg')
//item激活事件
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

//手机号登录
const phone = ref('')
//密码
const password = ref('')
// 请求二维码
let key = ref('')
// 64编码图
let qrimg = ref('')
//请求二维码
  api.post('/login/qr/key').then(res=>{
    key = res.data.data.unikey
  })
// 64编码图
    api.get('/login/qr/create',{params:{key,qrimg}}).then(res=>{
    qrimg = res.data.data.qrimg
  })

//验证二维码状态
  // if(qrimg && qrimg!= ''){
  //  const yz = setInterval(()=>{
  //     api.get('/login/qr/check',{params:{key}}).then(res=>{
  //     console.log('二维码验证状态',res.data)
  //   })
  //   },3000) 
  // }else{
  //   clearInterval(yz)
  // }
function loginFn(){
//使用手机号登录
console.log(phone.value)
console.log(password.value)
  api.get('/login/cellphone',{params:{phone:phone.value,password:password.value}}).then(res=>{
    console.log(res)
  }).catch(err=>{
    console.log(err)
  })

"http://www.codeman.ink/api/login/cellphone"
// 

}

</script>
<style lang="less">
.logo-box{
    display: flex;
    b{
      text-align: 30px;
    }
}
  .logo{
    width: 30px;
    height: 30px;

  }
  .el-dropdown{
    margin: 5px auto;
    margin-right: 100px;
  }
  .logo-text{
    color: hsla(0,0%,100%,.85);
    float: right;
    text-align:center;
    line-height: 30px;
  }
  .login-item{
    width: 300px;
    height: 300px;
  }
  .img64{
    margin-left: 20px;
  }

</style>